<template>
  <div>
    <infoTable @openImgModel="openImgModel" :InfoTable="InfoTable"></infoTable>
    <cashDetails :InfoTable="InfoTable"></cashDetails>

    <a-tabs :activeKey="activeKey" @change="callback">
      <a-tab-pane :key="1" tab="收入记录">
        <search-table
          :url="rebateUrl"
          ref="searchtable"
          :columns="rebateColumns"
          :form="form"
          :xLength="1300"
          :hideSelect="true"
          :requestType="true"
        >
          <template slot="searchForm">
            <a-form layout="inline" :form="form">
              <a-form-item label="结算类型">
                <a-select
                  style="width: 150px"
                  :options="settleTypeList"
                  v-decorator="['settleType', { initialValue: 1 }]"
                  placeholder="请选择结算类型"
                  @change="changeSettleTypr"
                >
                </a-select>
              </a-form-item>
              <a-form-item label="订单类型">
                <a-select
                  style="width: 150px"
                  :options="orderTypeList"
                  v-decorator="['orderType', { initialValue: '' }]"
                  placeholder="请选择订单类型"
                >
                </a-select>
              </a-form-item>
              <a-form-item label="购买活动名称">
                <a-input
                  style="width: 200px"
                  v-decorator="['activityName']"
                  placeholder="请输入购买活动名称"
                  autocomplete="off"
                >
                </a-input>
              </a-form-item>
              <a-form-item :label="lableText">
                <fast-range-picker
                  allowClear
                  v-decorator="['querySettleStartTime-querySettleEndTime']"
                >
                </fast-range-picker>
              </a-form-item>
            </a-form>
          </template>
          <template slot="oprationRow">
            <permission authority="rebate:shop:export">
              <a-button type="primary" @click="exportRebateExcel"
                >导出</a-button
              >
            </permission>
          </template>
        </search-table>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="提现记录">
        <search-table
          :url="distributeUrl"
          ref="distributeSearchtable"
          :columns="distributeColumns"
          :form="form"
          :xLength="1600"
          :hideSelect="true"
          :requestType="true"
        >
          <template slot="searchForm">
            <a-form layout="inline" :form="form">
              <a-form-item label="提现时间">
                <fast-range-picker
                  allowClear
                  v-decorator="['queryWithdrawStartTime-queryWithdrawEndTime']"
                >
                </fast-range-picker>
              </a-form-item>
              <a-form-item label="提现状态">
                <a-select
                  style="width: 150px"
                  :options="withdrawStatusList"
                  v-decorator="['withdrawStatus', { initialValue: '' }]"
                  placeholder="请选择提现状态"
                >
                </a-select>
              </a-form-item>
            </a-form>
          </template>
          <template slot="oprationRow">
            <permission authority="withdraw:shop:export">
              <a-button type="primary" @click="exportDistributeExcel"
                >导出</a-button
              >
            </permission>
          </template>
        </search-table>
      </a-tab-pane>
    </a-tabs>
    <img-model
      :imgVisible="imgVisible"
      @cancel="closePreviewModal"
      :personalPic="personalPic"
    ></img-model>
  </div>
</template>
<script>
import infoTable from "./components/infoTable.vue";
import cashDetails from "./components/cashDetails.vue";
import imgModel from "./components/imgModel.vue";
export default {
  name: "distribution",
  components: {
    infoTable,
    cashDetails,
    imgModel,
  },
  data() {
    return {
      imgVisible: false,
      InfoTable: {},
      personalPic: [],
      activeKey: 1,
      form: this.$form.createForm(this, { name: "table_search" }),
      rebateColumns: [
        {
          title: "订单编号",
          dataIndex: "orderGoodsNo",
          key: "orderGoodsNo",
          width: 200,
        },
        {
          title: "订单类型",
          dataIndex: "orderType",
          key: "orderType",
          customRender: (text, row) => {
            switch (text) {
              case "GOODS_ORDER":
                return "商品订单";
              case "GROUP_ORDER":
                return "拼团订单";
              case "SALE_CARD_ORDER":
                return "售卡订单";
            }
          },
        },
        {
          title: "购买活动名称",
          dataIndex: "activityName",
          key: "activityName",
        },
        {
          title: "活动所属店铺",
          dataIndex: "shopName",
          key: "shopName",
        },
        {
          title: "购买人",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "下单时间",
          dataIndex: "crateDate",
          key: "crateDate",
        },
        {
          title: "支付金额",
          dataIndex: "actualAmount",
          key: "actualAmount",
          align: "center",
          customRender: (text, row) => {
            return text ? "￥" + (text / 100).toFixed(2) : "";
          },
        },
        {
          title: "佣金金额",
          dataIndex: "commission",
          key: "commission",
          align: "center",
          customRender: (text, row) => {
            return text ? "￥" + (text / 100).toFixed(2) : "";
          },
        },
        {
          title: "结算时间",
          dataIndex: "settleTime",
          key: "settleTime",
          align: "center",
          customRender: (text, row) => {
            return text ? text : "—";
          },
        },
        {
          title: "店铺收入金额",
          dataIndex: "shopIncomeAmount",
          key: "shopIncomeAmount",
          align: "center",
          customRender: (text, row) => {
            return text ? "￥" + (text / 100).toFixed(2) : "";
          },
        },
      ],
      rebateUrl: "/rebate/shop/page",
      settleTypeList: [
        {
          label: "已结算",
          value: 1,
        },
        {
          label: "未结算",
          value: "0",
        },
      ],
      orderTypeList: [
        {
          label: "全部类型",
          value: "",
        },
        {
          label: "商品订单",
          value: "GOODS_ORDER",
        },
        {
          label: "拼团订单",
          value: "GROUP_ORDER",
        },
        {
          label: "售卡订单",
          value: "SALE_CARD_ORDER",
        },
      ],
      lableText: "结算时间",
      distributeUrl: "/withdraw/shop/page",
      distributeColumns: [
        {
          title: "提现时间",
          dataIndex: "withdrawTime",
          key: "withdrawTime",
        },
        {
          title: "提现类型",
          dataIndex: "withdrawType",
          key: "withdrawType",
          customRender: (text, row) => {
            switch (text) {
              case 1:
                return "银行卡";
              case 2:
                return "微信";
            }
          },
        },
        {
          title: "交易店铺",
          dataIndex: "shopName",
          key: "shopName",
        },
        {
          title: "提现人",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "提现手机号",
          dataIndex: "phone",
          key: "phone",
        },
        {
          title: "账户",
          dataIndex: "bankNo",
          key: "bankNo",
        },
        {
          title: "开户行",
          dataIndex: "bankName",
          key: "bankName",
        },
        {
          title: "业务单号",
          dataIndex: "transId",
          key: "transId",
        },
        {
          title: "提现金额",
          dataIndex: "withdrawPrice",
          key: "withdrawPrice",
          align: "center",
          customRender: (text, row) => {
            return text ? "￥" + (text / 100).toFixed(2) : "";
          },
        },
        {
          title: "提现状态",
          dataIndex: "withdrawStatus",
          key: "withdrawStatus",
          customRender: (text, row) => {
            switch (text) {
              case 1:
                return "成功";
              case 2:
                return "失败";
              case 3:
                return "进行中";
              case 4:
                return "已申请";
            }
          },
        },
        {
          title: "到账时间",
          dataIndex: "updateDate",
          key: "updateDate",
        },
        {
          title: "手续费",
          dataIndex: "withdrawFee",
          key: "withdrawFee",
          align: "center",
          customRender: (text, row) => {
            return text ? "￥" + (text / 100).toFixed(2) : "";
          },
        },
        {
          title: "实际到账金额",
          dataIndex: "actualAmount",
          key: "actualAmount",
          align: "center",
          customRender: (text, row) => {
            return text ? "￥" + (text / 100).toFixed(2) : "";
          },
        },
      ],
      withdrawStatusList: [
        {
          label: "全部状态",
          value: "",
        },
        {
          label: "成功",
          value: 1,
        },
        {
          label: "失败",
          value: 2,
        },
        {
          label: "进行中",
          value: 3,
        },
        {
          label: "已申请",
          value: 4,
        },
      ],
    };
  },
  created() {
    this.getShopIncomeInfo();
  },
  methods: {
    openImgModel() {
      this.imgVisible = true;
    },
    closePreviewModal() {
      this.imgVisible = false;
    },

    //店铺收入详情
    async getShopIncomeInfo() {
      let res = await this.$post("/shop/query", {});
      if (res && res.returnCode == 1000) {
        // console.log(res);
        this.InfoTable = res.dataInfo;
        this.personalPic = [res.dataInfo.photoFront, res.dataInfo.photoReverse];
      }
    },

    callback(key) {
      this.activeKey = key;
    },
    changeSettleTypr(value) {
      if (value == 1) {
        this.lableText = "结算时间";
      } else if (value == 0) {
        this.lableText = "下单时间";
      }
    },

    //导出
    exportRebateExcel() {
      if (this.$refs.searchtable.dataSource.length == 0) {
        this.$message.warning("页面数据为空无法导出！！");
        return false;
      }
      this.$export(
        "/rebate/shop/export",
        this.$refs.searchtable.searchParams || {},
        false,
        {},
        true
      );
    },
    exportDistributeExcel() {
      if (this.$refs.distributeSearchtable.dataSource.length == 0) {
        this.$message.warning("页面数据为空无法导出！！");
        return false;
      }
      this.$export(
        "/withdraw/shop/export",
        this.$refs.distributeSearchtable.searchParams || {},
        false,
        {},
        true
      );
    },
  },
};
</script>
<style scoped lang="less">
</style>